<template>
  <div id="main" style="width: 100%;height:100%;"></div>
</template>

<script setup>
import {onMounted, watch} from "vue";
import * as echarts from 'echarts';
import axios from "axios";
let prop = defineProps({
  year: String
})
let option;
let myChart;
onMounted(() => {
  axios.get("http://127.0.0.1:5000/"+prop.year).then((res) => {
    // 基于准备好的dom，初始化echarts实例
    let chartDom = document.getElementById('main');
    myChart = echarts.init(chartDom);
    let data = res.data;
    option = {
      xAxis: {
        type: 'category',
        data: data.score
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: data.human,
          type: 'line',
          smooth: true
        }
      ]
    };

    option && myChart.setOption(option);
  })
})
watch(prop , (newVal, oldVal) => {
  if (Number(newVal.year) <= 24){
    axios.get("http://127.0.0.1:5000/"+newVal.year).then((res) => {
      option.xAxis.data=res.data.score;
      option.series[0].data=res.data.human;
      option && myChart.setOption(option);
    })
  }else {
    alert("没有数据")
  }
})

</script>


